// namespace: "Header" 
<template>
  <div class="header-container flex flex-between border-box pl50 pr50">
    <img class="logo" src="../assets/image/logo_pro.jpg" />
    <div class="flex flex-between">
      <img class="avatar mr10" :src="userInfo.avatar" />
      <el-dropdown size="small" trigger="hover">
        <span class="el-dropdown-link cursor-pointer">{{userInfo.name}}</span>
        <template #dropdown>
          <el-dropdown-menu class="log-out">
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  getCurrentInstance
} from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Header",
  props: {
    userInfo: {
      required: true
    }
  },
  setup() {
    // @ts-ignore
    const { ctx } = getCurrentInstance();

    const router = useRouter();

    // 退出登录
    const logout = () => {
      console.log("退出登录");
      ctx
        .$axios({
          methos: "get",
          url: "/serverApi/logout"
        })
        .then((result: any) => {
          if (result.code == 200) {
            console.log("退出成功", result);
            ElMessage.success("退出成功");
            setTimeout(() => {
              router.push("/login");
            }, 500);
          }
        })
        .catch((err: Error) => {
          console.log("退出 error", err);
        });
    };
    return { logout };
  }
});
</script>
<style lang="scss" scoped>
.header-container {
  width: 100%;
  height: 70px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
  .logo {
    height: 70px;
    border-radius: 10%;
  }
  .avatar {
    width: 50px;
    border-radius: 50%;
  }
}
</style>

<style lang="scss">
.header-container {
  .el-dropdown:focus {
    outline: none;
  }
  .log-out {
    border-radius: 10px;
  }
  .el-dropdown__list {
    border-radius: 10px;
  }
}
</style>